<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css" />
    <script type="text/javascript" src="../../lib/aircity/ac_conf.js"></script>
    <script type="text/javascript" src="../../lib/aircity/ac.min.js"></script>
    <script type="text/javascript" src="../../lib/vue3.js"></script>
  </head>
  <body>
    <div id="app">
      <div id="player" style="height: 100%"></div>
      <div class="control">
        <div class="top">
          <div>坡度向分析</div>
        </div>
        <div class="params">
          <div class="title">参数设置</div>
          <div class="item">
            <div class="label">显示样式</div>
            <div class="content">
              <div class="flex-box">
                <input type="radio" :value="1" v-model="options.colorMode" :checked="options.colorMode == 1" />
                <span style="margin: 0px 5px">坡度</span>
              </div>
              <div class="flex-box">
                <input type="radio" :value="2" v-model="options.colorMode" :checked="options.colorMode == 2" />
                <span style="margin: 0px 5px">坡向</span>
              </div>
            </div>
          </div>

          <div class="item">
            <div class="label">坡向箭头</div>
            <div class="content">
              <div class="flex-box">
                <input type="checkbox" name="" v-model="options.showArrow" />
                <input type="color" v-model="options.arrowColor" style="margin-left: 10px" />
              </div>
            </div>
          </div>

          <div class="button-box">
            <button @click="start()">开始坡度向分析</button>
          </div>

          <div class="button-box">
            <button @click="stop()" class="sunlight stop">停止坡度向分析</button>
          </div>
        </div>
      </div>
      <div class="legend">
        <div class="title">图例</div>
        <div class="item" v-for="item in legend[options.colorMode-1]">
          <div class="area" :style="`background:${item.color} `"></div>
          <div class="label">{{ item.label }}</div>
        </div>
      </div>
    </div>

    <script type="text/javascript">
      const { createApp, reactive, watch } = Vue

      const vueComposition = {
        setup() {
          // 坡度向分析 代码块
          const options = reactive({
            showArrow: true, //是否显示箭头，{boolean}，默认值：true
            colorMode: 1, //模式，{number}，取值范围：【1坡度 2坡向】，默认值：1，
            arrowColor: '#ffffff' //箭头颜色
          })

          // 开始坡度向分析
          const start = () => {
            const o = JSON.parse(JSON.stringify(options))
            o.arrowColor = toColorArr(o.arrowColor)
            // 开启分析
            __g.tools.startTerrainSlopeAnalysis(o)
          }

          // 停止坡度向分析
          const stop = () => {
            // 关闭分析
            __g.tools.stopTerrainSlopeAnalysis()
          }

          const toColorArr = (sColor, opacity = 1) => {
            const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/
            if (sColor && reg.test(sColor)) {
              if (sColor.length === 4) {
                var sColorNew = '#'
                for (var i = 1; i < 4; i += 1) {
                  sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1))
                }
                sColor = sColorNew
              }
              //处理六位的颜色值
              var sColorChange = []
              for (var i = 1; i < 7; i += 2) {
                sColorChange.push(parseInt('0x' + sColor.slice(i, i + 2)) / 255)
              }
              sColorChange.push(opacity)
              return sColorChange
            } else {
              return sColor
            }
          }
          // 图例数组
          const legend = [
            [
              {
                color: '#07f507',
                label: '0~7'
              },
              {
                color: '#5af700',
                label: '7~15'
              },
              {
                color: '#8cf700',
                label: '23~31'
              },
              {
                color: '#b5f700',
                label: '31~39'
              },
              {
                color: '#def700',
                label: '39~47'
              },
              {
                color: '#ffb500',
                label: '47~55'
              },
              {
                color: '#ff8401',
                label: '55~63'
              },
              {
                color: '#fe4a00',
                label: '63~70'
              },
              {
                color: '#f40000',
                label: '70~90'
              }
            ],
            [
              {
                color: '#7f7f7f',
                label: '平坦'
              },
              {
                color: '#ff0000',
                label: '北'
              },
              {
                color: '#ffb500',
                label: '东北'
              },
              {
                color: '#94ff00',
                label: '东'
              },
              {
                color: '#00ff21',
                label: '东南'
              },
              {
                color: '#00ffdd',
                label: '南'
              },
              {
                color: '#006cff',
                label: '西南'
              },
              {
                color: '#4900ff',
                label: '西'
              },
              {
                color: '#ff00fe',
                label: '西北'
              }
            ]
          ]

          return {
            options,
            legend,
            start,
            stop
          }
        }
      }

      const app = createApp(vueComposition).mount('#app')

      const OnLoad = () => {
        const __DigitalTwinPlayer = new DigitalTwinPlayer(HostConfig.Player, { domId: 'player' })
      }

      //自适应分辨率
      const onResize = async () => {
        let playerView = document.getElementById('player')
        playerView.style.height = window.innerHeight + 'px'
        playerView.style.width = window.innerWidth + 'px'
      }

      window.addEventListener('load', OnLoad, true)
      window.addEventListener('resize', onResize, true)

      //页面离开事件(离开时清除此页面的操作及重置场景)
      window.onunload = function (e) {
        __g.tools.stopTerrainSlopeAnalysis()
        // 重置场景
        __g.reset()
      }
    </script>
  </body>
</html>
